<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getUserCollectionListUrl } from '@/api/collection'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const data = ref<any>([])
const total = ref<any>(0)
const page = ref({
  page: 1,
  rows: 5
})
const handleSizeChange = (val: number) => {
  page.value.page = 1
  page.value.rows = val
  getData()
}

const handleCurrentChange = (val: number) => {
  page.value.page = val
  getData()
}
const getData = () => {
  let params = {
    sqlId: 'userCollectionAndTrail.getUserCollectionList',
    sqlParam: {},
    pagination: true,
    dbName: 'report',
    debug: 0,
    page: page.value.page,
    rows: page.value.rows
  }
  loading.value = true
  getUserCollectionListUrl(params).then((res: any) => {
    total.value = res.total
    data.value = res.rows
    loading.value = false
  })
}

const gotoPage = (path: string) => {
  router.push({
    path: `${path}`
  })
}

onMounted(() => {
  getData()
})
</script>
<template>
  <div class="mineCollection" v-loading="loading" v-if="data.length > 0">
    <el-scrollbar class="scrollbar">
      <div class="collection" v-for="(item, index) in data" :key="index">
        <div class="num">{{ (page.page - 1) * page.rows + index + 1 }}</div>
        <div class="title" @click="gotoPage(item.appUrl)">{{ item.appName }}</div>
        <div class="date">{{ item.createData.substr(0, 10) }}</div>
      </div>
    </el-scrollbar>

    <el-pagination
      v-model:current-page="page.page"
      v-model:page-size="page.rows"
      size="default"
      :hide-on-single-page="true"
      :disabled="false"
      :background="true"
      layout="total, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <el-empty description="暂无数据" style="padding: 20px" />
</template>
<style scoped lang="less">
.mineCollection {
  display: flex;
  height: 100%;
  flex-direction: column;
  .scrollbar {
    flex: 1;
    .collection {
      display: flex;
      flex-direction: row;
      margin-bottom: 10px;
      .num {
        width: 20px;
        background-color: var(--cnac-main);
        border-radius: 3px;
        color: #fff;
        text-align: center;
      }
      .title {
        flex: 1;
        margin-left: 5px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .title:hover {
        color: var(--cnac-main);
      }
    }
  }
}
</style>
